<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入公共的样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- 引入我们自己写的样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 链接favicon小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 导入jQuery文件 -->
    <script src="./js/jquery-1.12.4.js"></script>
    <!-- 引入echarts文件 -->
    <script src="./js/echarts.js"></script>
    <!-- 引入echarts地图文件 -->
    <script src="./js/china.js"></script>
    <!-- 引入js文件 -->
    <script src="./js/index.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <!-- 1.第一列 -->
        <div class="column">
            <!-- 1.1数据概览 -->
            <div class="overview panel ">
                <div class="inner">
                    <div class="item">
                        <p>2,190</p>
                        <span>
                            <i class="icon-dot"></i>
                            设备总数
                        </span>
                    </div>
                    <div class="item">
                        <p>190</p>
                        <span>
                            <i class="icon-dot"></i>
                            季度新增
                        </span>
                    </div>
                    <div class="item">
                        <p>3001</p>
                        <span>
                            <i class="icon-dot"></i>
                            运营设备
                        </span>
                    </div>
                    <div class="item">
                        <p>108</p>
                        <span>
                            <i class="icon-dot"></i>
                            异常设备
                        </span>
                    </div>
                </div>
            </div>
            <!-- 1.2故障设备监控 -->
            <div class="monitor panel">
                <div class="inner">
                    <!-- tab栏切换 页签 -->
                    <div class="tabs">
                        <a href="javescript:void(0)" class='active'>故障设备监控</a>
                        <a href="javescript:void(0)">一场设备监控</a>
                    </div>
                    <!-- tab栏切换页面 -->

                    <div class="content">
                        <div class="head">
                            <span>故障时间</span>
                            <span>故障地址</span>
                            <span>故障代码</span>
                        </div>
                        <div class="carousel">
                            <ul>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100011</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100012</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100013</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100014</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100015</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100016</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100017</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100018</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100019</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100020</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100021</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100022</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100023</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100024</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100025</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100011</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100012</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100013</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100014</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100015</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100016</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100017</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100018</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>100019</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>解放军附属物和乳房酒精分解分解分解附件弟弟</span>
                                    <span>1000110</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="content" style="display:none;">
                        <div class=" head">
                            <span>异常时间</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <div class="carousel">
                            <ul>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200011</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200012</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200013</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200014</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200015</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200016</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200017</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200018</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200019</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200020</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200021</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200022</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200023</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200024</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200025</span>
                                </li>
                                <!-- <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200011</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200012</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200013</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200014</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200015</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200016</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200017</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200018</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>200019</span>
                                </li>
                                <li>
                                    <span>20200805</span>
                                    <span>汤家进调节机体汤家进汤家进汤家进汤家进</span>
                                    <span>2000110</span>
                                </li>  -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 1.3点位分布统计 -->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="echarts">
                        <div class="pie fl"></div>
                        <div class="data fr">
                            <div class="item">
                                <p>32.,11</p>
                                <span>
                                    <i class="icon-dot" style='color:#ed3f35'></i>
                                    点位总数</span>
                            </div>
                            <div class="item">
                                <p>418</p>
                                <span>
                                    <i class="icon-dot" style='color:#eacf19'></i>
                                    本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2.第二列 -->
        <div class="column">
            <!-- 2.1设备地图统计 -->
            <div class="map">
                <h3><span class="icon-cube"></span>设备数据统计</h3>
                <div class="echarts ">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 2.2全国用户总量统计 -->
            <div class="user panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="echarts">
                        <div class="line fl"></div>
                        <div class="data fr">
                            <div class="item">
                                <p>120,899</p>
                                <span><i class="icon-dot" style="color:#ed3f35"></i>用户总量</span>
                            </div>
                            <div class="item">
                                <p>248</p>
                                <span><i class="icon-dot" style="color:#eacf19"></i>本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3.第三列 -->
        <div class="column">
            <!-- 3.1 订单量 -->
            <div class=" order panel">
                <div class="inner">
                    <div class="head">
                        <a href="javascript:void(0)" class="active">365天</a>
                        <span></span>
                        <a href="javascript:void(0)">90天</a>
                        <span></span>
                        <a href="javascript:void(0)">30天</a>
                        <span></span>
                        <a href="javascript:void(0)">24小时</a>
                    </div>
                    <div class="data">
                        <div class="item">
                            <p>1,987</p>
                            <span>
                                <i class="icon-dot" style="color:#ed3f35"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <p>3834</p>
                            <span>
                                <i class="icon-dot" style="color:#e6cc19"></i>
                                销售额(万元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3.2 销售额总量-->
            <div class="sales panel">
                <div class="inner">
                    <div class="head">
                        <span>销售额统计</span>
                        <a href="href:javascript:void(0)"class="active">年</a>
                        <a href="href:javascript:void(0)">季</a>
                        <a href="href:javascript:void(0)" >月</a>
                        <a href="href:javascript:void(0)">日</a>
                    </div>
                    <div class="echarts">
                        <div class="line"></div>
                    </div>
                </div>
            </div>

            <!-- 3.3  渠道分布&季度销售进度-->
            <div class="clearfix">
                <!-- 左边的 -->
                <div class=" channel panel fl">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class='item'>
                                <p><b>39</b><small>%</small></p>
                                <span><i class="icon-plane"></i>机场</span>
                            </div>
                            <div class='item'>
                                <p><b>28</b><small>%</small></p>
                                <span><i class="icon-bag"></i>商场</span>
                            </div>
                            <div class='item'>
                                <p><b>20</b><small>%</small></p>
                                <span><i class="icon-train"></i>地铁</span>
                            </div>
                            <div class='item'>
                                <p><b>13</b><small>%</small></p>
                                <span><i class="icon-bus"></i>火车站</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边的 -->
                <div class="quarter panel fr">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="echarts">
                            <div class="loop"></div>
                            <div class="show"><b>75</b><small>%</small></div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <p>1,321</p>
                                <span><i class="icon-dot" style="color:#6acca3"></i>销售额 </span>
                            </div>
                            <div class="item">
                                <p>150%</p>
                                <span><i class="icon-dot" style="color:#ed3f35"></i>同比增长</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3.4 全国热榜-->
            <div class="hot panel">
                <div class="inner">
                    <!-- 左边 -->
                    <div class="all">
                        <h3>全国热榜</h3>
                        <div class="data">
                            <p><i class="icon-cup1" style="color: #d93f36;"></i><span>可爱多</span></p>
                            <p><i class="icon-cup2" style="color: #68d8fe;"></i><span>哇哈哈</span></p>
                            <p><i class="icon-cup3" style="color: #4690ec;"></i><span>喜之郎</span></p>
                        </div>
                    </div>
                    <!-- 右边 -->
                    <div class="province">
                        <h3 class="clearfix"><b>各省热销</b><i>// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="fl">
                                <li class="active">
                                    <span>北京</span>
                                    <b>25，179</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>河北日</span>
                                    <b>5，556</b>
                                    <i class='icon-down'></i>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <b>23,522</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>江苏</span>
                                    <b>45,521</b>
                                    <i class='icon-down'></i>
                                </li>
                                <li>
                                    <span>山东</span>
                                    <b>20,760</b>
                                    <i class='icon-up'></i>
                                </li>

                            </ul>
                            <ul class="fr">
                                <li>
                                    <span>八喜</span>
                                    <b>3,444</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>好多鱼</span>
                                    <b>3,547</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>哇哈哈</span>
                                    <b>7,489</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>可爱多</span>
                                    <b>4,751</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>小洋人</span>
                                    <b>4,756</b>
                                    <i class='icon-up'></i>
                                </li>
                                <li>
                                    <span>顶顶顶</span>
                                    <b>2,457</b>
                                    <i class='icon-up'></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>